<template>
	<div class="user">
		<!--搜索表单-->
		<div class="common-seach-wrap">
			<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="活动名称">
					<el-input v-model="formInline.name" placeholder="请输入活动标题"></el-input>
				</el-form-item>
				<el-form-item label="商户名称">
					<el-select size="small" v-model="formInline.shop_supplier_id" filterable placeholder="请选择">
						<el-option label="全部" :value="0"></el-option>
						<el-option v-for="(item, index) in supplierList" :key="index" :label="item.name"
							:value="item.shop_supplier_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-tabs v-model="audit_status" @tab-change="getTableList">
			<el-tab-pane label="全部" :name="0"></el-tab-pane>
			<el-tab-pane label="待审核" :name="10"></el-tab-pane>
			<el-tab-pane label="已通过" :name="20"></el-tab-pane>
			<el-tab-pane label="未通过" :name="30"></el-tab-pane>
		</el-tabs>
		<div class="common-level-rail">

		</div>
		<div class="product-content point-list">
			<div class="table-wrap">
				<el-table :data="tableData" border style="width: 100%" v-loading="loading">
					<el-table-column prop="buy_id" label="ID"></el-table-column>
					<el-table-column prop="name" label="活动名称"></el-table-column>
					<el-table-column prop="supplier" label="商户名称">
						<template #default="scope">
							<span v-if="scope.row.supplier">{{scope.row.supplier.name}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="start_time_text" label="开始时间" width="150"></el-table-column>
					<el-table-column prop="end_time_text" label="结束时间" width="150"></el-table-column>
					<el-table-column prop="status_text" label="活动状态" width="120"></el-table-column>
					<el-table-column prop="name" label="状态" width="100">
						<template #default="scope">
							<div class="d-c-c">
								<el-switch :active-value="1" :inactive-value="0" v-model="scope.row.status"
									@change="changeState(scope.row,scope.row.status)" />
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="sort" width="80" label="排序"></el-table-column>
					<el-table-column fixed="right" width="150" label="操作">
						<template #default="scope">
							<el-button v-auth="'/plus/buyactivity/edit'" @click="editClick(scope.row.buy_id)"
								type="text" size="small" v-if="scope.row.audit_status==10">
								审核
							</el-button>
							<el-button v-auth="'/plus/buyactivity/edit'" @click="editClick(scope.row.buy_id)"
								type="text" size="small" v-if="scope.row.audit_status!=10">
								详情
							</el-button>
							<el-button v-auth="'/plus/buyactivity/delete'" @click="deleteClick(scope.row.buy_id)"
								type="text" size="small"> 删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页-->
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
					:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
					:total="totalDataNumber">
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		BuyList,
		delBuy,
		editState
	} from "@/api/buy.js";
	export default {
		components: {},
		data() {
			return {
				form: {},
				tableData: [],
				/*一页多少条*/
				pageSize: 20,
				/*一共多少条数据*/
				totalDataNumber: 0,
				/*当前是第几页*/
				curPage: 1,
				/*是否加载完成*/
				loading: true,
				formInline: {
					name: '',
					shop_supplier_id: 0
				},
				status: ['未开始', '进行中', '已结束'],
				audit_status: 0,
				supplierList: []
			};
		},
		created() {
			/*获取列表*/
			this.getTableList();
		},
		methods: {
			/*获取列表*/
			getTableList() {
				let self = this;
				let Params = this.formInline;
				Params.audit_status = self.audit_status;
				Params.page = self.curPage;
				Params.list_rows = self.pageSize;
				self.loading = true;
				BuyList(Params, true)
					.then(data => {
						self.loading = false;
						self.tableData = data.data.list.data;
						self.totalDataNumber = data.data.list.total;
						self.supplierList = data.data.supplierList;
					}).catch(error => {
						self.loading = false;
					});
			},
			/*选择第几页*/
			handleCurrentChange(val) {
				let self = this;
				self.curPage = val;
				self.loading = true;
				self.getTableList();
			},

			/*每页多少条*/
			handleSizeChange(val) {
				let self = this;
				self.curPage = 1;
				self.pageSize = val;
				self.getTableList();
			},
			/*搜索查询*/
			onSubmit() {
				this.curPage = 1;
				this.getTableList();
			},
			/*编辑*/
			editClick(e) {
				let self = this;
				this.$router.push({
					path: '/plus/buyactivity/edit',
					query: {
						buy_id: e
					}
				})
			},

			/*删除*/
			deleteClick(e) {
				let self = this;
				ElMessageBox.confirm('此操作将永久删除该记录,是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.loading = true;
					delBuy({
						buy_id: e
					}, true).then(data => {
						self.loading = false;
						ElMessage({
							message: data.msg,
							type: 'success'
						});
						self.getTableList();

					}).catch(error => {
						self.loading = false;
					});

				}).catch(() => {
					self.loading = false;
					ElMessage({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			/* 状态设置*/
			changeState(row, state) {
				let self = this;
				let war = '';
				if (state == 1) {
					war = '开启';
				} else if (state == 0) {
					war = '关闭';
				}
				editState({
					buy_id: row.buy_id,
					status: state
				}).then(data => {
					ElMessage({
						message: war + '成功',
						type: 'success'
					});
					self.getTableList();
				});
			},
		}
	};
</script>

<style>
	.point-list .el-input-number--mini {
		width: auto;
	}
</style>